<template>
	<view class="content">
		

			<view class="tech-bg">
				<view class="tech-eva-con">
					<!-- <view>请选择迁移地址</view>

					
					<view class="uni-form-item uni-column">
						<label class="nnn_me">省：</label>
						<picker class="check" @change="check_sheng" :range="sheng">	
							<label class="check_text">{{sheng[sheng_index]}}</label>		
						</picker>
						<label class="nnn_me">市：</label>
						<picker class="check" @change="check_shi" :range="shi">
							<label class="check_text">{{shi[shi_index]}}</label>		
						</picker>
						<label class="nnn_me">区：</label>
						<picker class="check" @change="check_qu" :range="qu">
							<label class="check_text">{{qu[qu_index]}}</label>		
						</picker>
					</view> -->
					
					
						<select-lay class="seclectpaytype" :value="paytype" slabel="type" svalue="typeid" placeholder="请选择迁证省" :options="paymode" @selectitem="selectitem"></select-lay>
						<select-lay class="seclectshitype" :value="shiname" slabel="type" svalue="typeid" placeholder="请选择迁证市" :options="shi" @selectitem="selectshi"></select-lay>
						<select-lay class="seclectqutype" :value="qutype" slabel="q_name" svalue="q_id" placeholder="请选择迁证区" :options="qu" @selectitem="selectqu"></select-lay>
				</view>
				<view class="kongzhi">
					<text @click="send_move">提交申请</text>
				</view>
				
			</view>
			</view>
</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	

	export default {
		data() {
			return {
				
				// sheng:['--请选择--'],
				// sheng_index:0,
				// shi:['--请选择--'],
				// shi_index:0,
				// qu:['--请选择--'],
				// qu_index:0,
				// talk_list:null,
				// page:1,
				// jg:'',
				paymode: [{
				    type: '太原',
				    typeid: 14001
				}, {
				    type: '合肥',
				    typeid: 15668
				}], //支付方式
				paytype:'',
				shi: [], //支付方式
				shiname:'',
				qu: [], //支付方式
				qutype:'',
			}
		},

		onLoad(options) {
			this.get_talk_list();
		},
		onShow() {

		},
		onHide() {
			// this.techn_map.page = 1;
			// this.techn_list = [];
		},
		methods: {
			selectitem(index, item) {
			        // this.payChannelid = item.typeid;
			        // console.log(this.payChannelid);
			        if (index >= 0) {
			            this.paytype = this.paymode[index].typeid;
						this.sheng(this.paytype);
						this.shiname = '';
						this.qutype = '';
			        } else {
			            this.paytype = ""
			        }
			    },
			selectshi(index, item) {
			        this.s_id = item.typeid;
					this.shiname = this.shi[index].typeid;
					this.check_shi(this.shiname);
					this.qutype = '';
			    },
			selectqu(index, item) {
			        this.q_id = item.q_id;
			        // console.log(this.payChannelid);
			        if (index >= 0) {
			            this.qutype = this.qu[index].q_id;
			        } else {
			            this.paytype = ""
			        }
			    },
			get_talk_list:function(){
				var that = this;
				request(app.globalData.api_url+'/v1/move/move_sheng', 'POST').then((res) => {
					if(res.data.code== 0){
						that.paymode = res.data.data;
						console.log(that.paymode);
					}else{
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			sheng:function(sheng){
				let sengData = {
					check_sheng:sheng,
				};
				request(app.globalData.api_url+'/v1/move/sheng', 'POST', sengData).then((res) => {
					if(res.data.code == 0){
						this.shi = res.data.data;
					}else{
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			check_shi:function(shi){
				let sengData = {
					check_shi:shi,
				};
				request(app.globalData.api_url+'/v1/move/shi', 'POST', sengData).then((res) => {
					console.log(res.data.data);
					if(res.data.code == 0){
						this.qu = res.data.data;
					}else{
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			send_move:function(){
				let shenQing = {
					sheng:this.paytype,
					shi:this.shiname,
					qu:this.qutype,
				}
				request(app.globalData.api_url+'/v1/move/shenqing', 'POST', shenQing).then((res) => {
					if(res.data.code == 0){
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
					}
				});
			}
		},
		
		// //下拉框
		// check_sheng: function(e) {		//改变的事件名
		// 	console.log('省，携带值为', e.target.value)   //用于输出改变索引值
		// 	this.sheng_index = e.target.value			//将数组改变索引赋给定义的index变量
		// 	this.jg=this.sheng[this.sheng_index]		//将array【改变索引】的值赋给定义的jg变量
		// 	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
		// },
		// check_shi: function(e) {		//改变的事件名
		// 	console.log('市，携带值为', e.target.value)  // 用于输出改变索引值
		// 	this.shi_index = e.target.value			//将数组改变索引赋给定义的index变量
		// 	this.jg=this.shi[this.shi_index]		//将array【改变索引】的值赋给定义的jg变量
		// 	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
		// },
		// check_qu: function(e) {		//改变的事件名
		// 	console.log('区，携带值为', e.target.value)  // 用于输出改变索引值
		// 	this.qu_index = e.target.value			//将数组改变索引赋给定义的index变量
		// 	this.jg=this.qu[this.qu_index]		//将array【改变索引】的值赋给定义的jg变量
		// 	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
		// },

		
	}
</script>
<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}
	.uni-column{
		width:100%;
		// text-align: center;
	}
	.nnn_me{
		width: 10%;
		float:left;
		text-align: right;
	}
	.check{
		width:89%;
		border: 1rpx solid #ccc ;
		border-radius: 10rpx;
		// background-color: #ccc;
		font-size: 40rpx;
		text-align:center;
		float:left;
	}
	.tech-bg{
	   text{
	    margin-left: 20rpx;
	    padding:20rpx 30rpx;
	    color: #fff;
	    font-size:26rpx;
	    border-radius:16rpx;
	    background-color:$uni-text-color-active;
		position: relative;
		top: 60rpx;
	    &.tech-act{
	     background: none;
	     border:2rpx solid $uni-text-color-grey;
	     color: $uni-text-color-grey;
	    }
	   }
	   
	  }
	.content {
		.uni-column{
			margin-top: 20rpx;
			font-sie:40rpx
		}
		.kongzhi{
			margin:40rpx;
			width: 100%;
			text-align: center;
		}
		.uni-select-lay-icon{
			text{
				display: none;
			}
		}
	}

	
	
</style>